import { Component, ErrorInfo, ReactNode } from "react";

export class ErrorBoundary extends Component {
  state = {
    hasError: false,
  };

  /**
   * 子组件树有错误
   */
  static getDerivedStateFromError() {
    console.log("getDerivedStateFromError");
    return {
      hasError: true,
    };
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
    console.log("componentDidCatch error", error);
    console.log("componentDidCatch errorInfo", errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <p>出错了</p>;
    }
    return this.props.children;
  }
}

class Hello extends Component {
  render() {
    // this.props.a++;
    return <h2>Hello</h2>;
  }
}

export default class App extends Component {
  state = {
    count: 1,
  };

  componentDidMount(): void {
    // this.setState.abcd((state) => ({ count: state.count + 1 }));
  }

  handleClick() {}

  render() {
    return (
      <div>
        <h1>App, {this.state.count}</h1>
        <button onClick={this.handleClick}>点我，出错</button>

        <Hello />
      </div>
    );
  }
}
